{extend name="common@public/base" /} {block name="title"}
<title>{:confv('title')}</title>
<meta name="keywords" content="{:confv('keywords')}">
<meta name="description" content="{:confv('description')}"> {/block} {block name="pjax_container"}
<div class="content">
	<style>
		.yulan {
			width: 200px;
			height: 100px;
			background-color: #fff;
			/*float: left;*/
			overflow: hidden;
			float:left;
		}
		.ylyuan {
			width: 200px;
			height: 100px;
			background-color: #fff;
			/*float: left;*/
			/*overflow: hidden;*/
			/*border-radius:50%;*/
			float:left;
		}

.affix{top:0;}

	</style>


<!--<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">
	简单的可折叠组件
</button>-->

<div id="demo" class="collapse">
	Nihil anim keffiyeh helvetica, craft beer labore wes anderson
	cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
	vice lomo.
</div>


<div class="input-group">
	<input class="form-control" name="email" value="{$user['email']}" placeholder="邮箱">
	<span class="input-group-addon">
      	<label>
      		<input id="iio" type="checkbox" checked > 公开
      	</label>
    </span>
</div>

	<button class="btn btn-success ee " data-toggle="modal" data-target="#myModal">按钮</button><br /><br />
	<a class="btn btn-success tt" data-dataobj='{"info":"吴汉忠","url":"#","data":{"aa":111,"bb":222,"cc":"abc"},"dd":1234}'>按222钮</a><br />
	<br />
	<form class="form-horizontal" method="POST" action="{:url('Uploads/cutimage')}" onsubmit="return false" enctype="multipart/form-data">
		<input name="dir" value="image" type="hidden"/>
		<input name="id" value="{$user['id']}" type="hidden"/>
		<input name="image_data" value="" id="image-data" type="hidden"/>

		<button class="x-dwr btn btn-warning ">选择图片
	    	<input type="file" id="inputImage" class="btn x-dwa-lt x-tm0" name="file" accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff">
		</button>
		<br />
		<button type="submit" class="btn btn-warning uploads x-mt-10">上传</button>
	</form>

	<div id="imgdata" class="" style="max-width:100%; max-height:300px; background-color: #fff;"></div>
	<hr />
	<div class="yulan"></div>
	<div class="yulan ylyuan x-yuan"></div>
	<hr />


	<div class="gg x-bgc-huang" style="width:350px;height: 500px;"></div>
<div class="gg1 x-bgc-lan x-p-20" style="width:350px;" >11111111111111111</div>

	<div class="gg x-bgc-hui" style="width:350px;height: 500px;"></div>
<div class="gg2 x-bgc-lan x-p-20" style="width:350px;" >2222222222222</div>

	<div class="gg x-bgc-hong" style="width:350px;height: 500px;"></div>
<div class="gg3 x-bgc-lan x-p-20" style="width:350px;">33333333333333</div>

	<div class="gg x-bgc-hei" style="width:350px;height: 500px;"></div>
<div class="gg4 x-bgc-lan x-p-20" style="width:350px;" >44444444444444</div>

	<div class="gg x-bgc-fen" style="width:350px;height: 500px;"></div>
<div class="gg5 x-bgc-lan x-p-20" style="width:350px;" >555555555555555</div>

	<div class="gg x-bgc-cheng" style="width:350px;height: 600px;"></div>
<div class="gg6 x-bgc-lan x-p-20" style="width:350px;" >66666666666666666</div>



	<div class="modal fade" id="myModal" data-backdrop="false">
	    <div class="modal-dialog ">
	        <div class="modal-content">
	            <div class="modal-header bg-primary">
	                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	                <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
	            </div>
	            <div class="modal-body">
	            	在这里添加一些文本
	            </div>
	            <div class="modal-footer">
	                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	                <button type="button" class="btn btn-primary">提交更改</button>
	            </div>
	        </div>
	    </div>
	</div>

</div>

<script>
$(function() {
//	$(".gg1").affix({
//      offset: {
//          top: $(".gg1").offset().top
//   	}
//  });

	$('.gg1').affix({
		offset: {
	      	top: $(".gg1").offset().top,
//	      	bottom: 700
	    }
	})
	$('.gg2').affix({
		offset: {
	      	top: $(".gg2").offset().top,
//	      	bottom: 700
	    }
	})
	$('.gg3').affix({
		offset: {
	      	top: $(".gg3").offset().top,
//	      	bottom: 700
	    }
	})
	$('.gg4').affix({
		offset: {
	      	top: $(".gg4").offset().top,
//	      	bottom: 700
	    }
	})
//	$('.gg2').affix({
//		offset: {
//	      	top: $(".gg2").offset().top,
//	      	bottom: function () {
//	      		console.log(this.bottom);
//	        	return (this.bottom = $(".gg2").offset().top)
//	        }
//	    }
//	})
console.log($(".gg2").offset().top);

	$('#iio').click(function(){
		var uo = $(this);
		if( uo[0].checked == true ){
			console.log('已经选');
		}else{
			console.log('没有选');
		}
//		console.log(uo);
	})

	$('.tt').click(function(){
		poplogin('logins');
	})

	var options = {
		aspectRatio: 1,
		preview: '.yulan',//预览区域【avatar-preview】
        strict: true,   //不能裁剪图片之外的区域
        viewMode: 1,	//0没有限制(默认),1限制裁剪不超过图片的大小。
        dragMode: 'move', //crop 创建新的选区(默认),move 移动图片,none 图片和选区都不能移动
        autoCropArea: 0.8, 	//默认选取大小 0~1 之间
        guides: true,   //是否在剪裁框上显示虚线
        cropBoxMovable: true,   //是否允许移动剪裁框
        cropBoxResizable: true,   //是否允许改变剪裁框的大小
		crop: function(e) {
			//移动裁剪框发生的事件
			var dataobj = $img.cropper('getData');
			var datasit = JSON.stringify(dataobj);
			$('#image-data').val(datasit);
//			console.log(datasit);
		}
	};
	var URL = window.URL || window.webkitURL;
	var $img;
	var $inputImage = $('#inputImage');
	if(URL) {
		$inputImage.change(function() {
			var files = this.files;
//			console.log(files);
			var file;
			if(files && files.length) {
				file = files[0];
				if(/^image\/\w+$/.test(file.type)) {
					uploadedImageURL = URL.createObjectURL(file);
					$img = $('<img src=" ' + uploadedImageURL + '" class="x-img-auto" />');
					if($('#imgdata img').length > 0){
						$('#imgdata').empty();
					}
					$('#imgdata').append($img);
					$img.cropper('destroy').cropper(options);
				} else {
					xzyn.msg('请选择一个图像文件。');
				}
			}
		});
	}
	//提交
	$('body').off('click', '.uploads');
	$('body').on("click", '.uploads', function(event) {
        var _this = $(this);
        var form = _this.closest('form');
        var ajax_option={
            dataType:'json',
            success:function(data){
                	console.log(data);
                if(data.status == '1'){
//                  xzyn.msg(data.info,'s',function(){
//                  	_this.button('reset');
//                  	var url = data.url;
//                  	$.pjax({url: url, container: '#pjax-container', fragment:'#pjax-container'});
//                  });
                }else if(data.status == '2'){	//要登录
//                  xzyn.msg(data.info,'s',function(){
//                  	_this.button('reset');
//                  	poplogin(type='login');
//                  });
                }else if(data.status == '3'){	//要刷新页面
//                  xzyn.msg(data.info,'s',function(){
//                  	_this.button('reset');
//                  	location.reload();
//                  });
                }else{
//                  _this.button('reset');
//                  xzyn.msg(data.info);
                }
            }
        }
        form.ajaxSubmit(ajax_option);
	});

})
</script>
{/block}